<template>
  <div class="container">
    <div class="header">
      <mt-header title="酒店详情">
        <router-link to="/address" slot="left">
          <mt-button icon="back"></mt-button>
        </router-link>
      </mt-header>
    </div>
    <div class="tags">
      <p v-if="isshow" @click="change()" class="shoucang">
        <u-icon color="orange" name="star-fill"></u-icon>已收藏
      </p>
      <p v-if="!isshow" @click="change()" class="shoucang">
        <u-icon name="star-fill"></u-icon>收藏
      </p>
    </div>
    <div class="img">
      <mt-swipe :auto="4000">
        <mt-swipe-item v-for="(item, index) in img" :key="index">
          <img class="img" :src="baseUrl + item.name" alt="" />
        </mt-swipe-item>
      </mt-swipe>
    </div>
    <div class="body">
      <div class="biaoti">
        {{ data.title }}
      </div>

      <div class="guanjianci">
        <mt-badge size="small" color="#888" v-for="(item, index) in guanjian" :key="index">{{ item }}</mt-badge>
      </div>

      <div class="con">
        <div class="buju">
          <div>
            <img src="../../assets/tabbar/Home.png" />
            <span class="xiangxi">
              <div style="font-size: 5px">整套</div>
              <div style="font-size: 4px">{{ data.houseArea }} m²</div>
            </span>
          </div>
          <div>
            <img src="../../assets/tabbar/Home.png" />
            <span class="xiangxi">
              <div style="font-size: 5px">整套</div>
              <div style="font-size: 4px">{{ data.houseArea }} m²</div>
            </span>
          </div>
          <div>
            <img src="../../assets/tabbar/Home.png" />
            <span class="xiangxi">
              <div style="font-size: 5px">整套</div>
              <div style="font-size: 4px">{{ data.houseArea }} m²</div>
            </span>
          </div>
        </div>

        <div class="jieshao">
          <hr />
          {{ data.advantage }}
        </div>
      </div>
      <div class="loc">
        <div class="jiatu"></div>
        <span class="dizhi">{{ data.location }}</span>
      </div>
      <div class="loc">
        <div class="jiatu"></div>
        <span class="dizhi">{{ data.location }}</span>
      </div>
      <div class="loc">
        <div class="jiatu"></div>
        <span class="dizhi">{{ data.cityInfo }}</span>
      </div>
    </div>

    <div class="comment">
      <div class="comment-container" v-for="(item, index) in commentData" :key="index">
        <div class="comment-header">
          <img class="avatar" :src="baseUrl + item.avatar" alt="User Avatar">
          <div class="comment-info">
            <h3 class="username">{{ item.nickName }}</h3>
            <p class="created-at">{{ item.createTime }}</p>
          </div>
        </div>
        <div class="comment-body">
          <p class="comment-text">{{ item.comment }}</p>
          <div class="comment-image" v-for="(item2, index2) in item.imageList" :key="index2">
            <img class="comment-image" :src="baseUrl + item2.url" alt="Comment Image">
          </div>

        </div>
        <div class="comment-footer">
          <button class="like-button">评分</button>
          <span class="likes-count">{{ item.score }}</span>
        </div>
      </div>



      <div class="comment-form">
        <input class="comment-input" type="text" placeholder="添加评论">

        <input class="image-input" type="file" accept="image/*">
        <button @click="addComment()" class="submit-button">提交</button>
      </div>

    </div>

    <div class="ruzhu">
      <div>
        <div class="r-time">
          <mt-field label="入住时间" placeholder="请选择日期" type="date" v-model="rtime"></mt-field>
        </div>
        <div class="l-time">
          <mt-field label="离开时间" placeholder="请选择日期" type="date" v-model="ltime"></mt-field>
        </div>
      </div>
      <div class="mask" v-if="chooseGo">
        <div class="modal">
          <div v-for="(item, index) in perList" :key="index" class="tag">
            <!-- <div @click="save(item.id)" style="margin-top:5px">{{ item.name }}</div> -->
            <input type="checkbox" :value="item.name" v-model="rid">
            {{ item.name }}
          </div>
          <button class="close-btn" @click="chooseGo = false">关闭</button>
        </div>
      </div>

      <div class="person" @click="choosePer">
        <img class="perImg" src="../../../src/assets/image/myself.png" alt="" />
        <p class="per">选择入住人</p>
      </div>

      <div>
        <div class="r-price">￥{{ this.data.price }}</div>
        <div class="r-liji">
          <mt-button @click="create()" class="button" type="primary" size="normal">立即入住</mt-button>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import uIcon from "../../components/u-icon.vue";
export default {
  components: {
    uIcon,
  },
  data() {
    return {
      id: "",
      data: [],
      img: [],
      baseUrl: 'http://172.31.1.104:9090',
      guanjian: [],
      isshow: false,
      rtime: "",
      ltime: "",
      perList: [],
      chooseres: {},
      chooseGo: false,
      rid: [],
      commentData: []
    };
  },
  methods: {
    getId() {
      // console.log(this.$route.params.jiu);
      this.id = this.$route.params.jiu;

      // console.log(this.id);
      this.detail(this.id);
    },
    detail(id) {
      this.$axios({
        url: this.$api.house + id,
        method: "get",
        Headers: { Authorization: "Bearer" + this.$store.state.token },
      }).then((res) => {
        this.data = res.data;
        this.img = res.data.imageList;
        this.guanjian = this.data.tags;
        // console.log(this.data);
        this.getGuanjian();
      });
    },
    getGuanjian() {
      let result = this.guanjian.toString();
      let test = result.split(" ");
      this.guanjian = test;
    },
    change() {
      this.isshow = !this.isshow;
      if (this.isshow == true) {
        this.addCollect(this.id);
      } else {
        this.delCollect(this.id);
      }
    },
    addCollect(id) {
      this.$axios({
        url: this.$api.collect + id,
        method: "post",
        Headers: { Authorization: "Bearer" + this.$store.state.token },
        data: { id: id },
      }).then((res) => {
        // console.log(res);
        this.isshow = true;
      });
    },
    delCollect(id) {
      this.$axios({

        url: this.$api.delCollect + id,
        method: "post",
        Headers: { Authorization: "Bearer" + this.$store.state.token },
        data: { id: id },
      }).then((res) => {
        // console.log(res);
        this.isshow = false;
      });
    },

    check() {
      this.$axios({
        url: this.$api.check,
        method: "get",
        Headers: { Authorization: "Bearer" + this.$store.state.token },
        params: { id: this.id },
      }).then((res) => {
        // console.log(res);
        if (res.code == 200) {
          if (res.data.isCollect == 1) {
            this.isshow = true;
          } else {
            this.isshow = false;
          }
        }
      });
    },
    getList() {
      this.$axios({
        url: this.$api.perList,
        method: 'get',
        Headers: { Authorization: 'Bearer' + this.$store.state.token }
      }).then(res => {
        this.perList = res.data

        // console.log(this.perList);

        // console.log(this.data);
      })
    },
    choosePer() {
      this.chooseGo = true
    },
    create() {

      // console.log(this.data);
      // console.log(this.rtime, this.ltime, this.rid);
      this.$axios({
        url: this.$api.orderCreate,
        method: 'post',
        Headers: { Authorization: 'Bearer' + this.$store.state.token },
        data: {

          houseId: this.data.id,
          livingCapacity: this.rid.length,
          startDate: this.rtime,
          endDate: this.ltime,

        }
      }).then(res => {

        // console.log(res);
        // console.log(this.perList);

        // console.log(this.data);
      })
    },
    Date() {
      const date = new Date()
      // console.log(date);

      // console.log(this.getDate(date));
      const date2 = this.dateFormat(date)
      // console.log(date2);
    },

    getCommentList() {
      this.$axios({
        url: this.$api.commentList,
        method: 'get',
        params: { orderId: this.id }
      }).then(res => {
        this.commentData = res.rows
        console.log(res.rows);
      })
    },
    addComment() {
      const id = this.id
      this.$axios({
        url: this.$api.comment,
        method: 'post',
        data: {
          comment:"test",
          houseId:id,
          orderId:38,
          isLiked:1,
          score:2,
          storeId:1,
          userId:2
        }
      }).then(res => {
        console.log(res);
      })
    }
  },
  mounted() {
    this.getId();
    this.getList()
    this.Date(),
      this.getCommentList()
  },
};
</script>

<style lang="scss" scoped>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.container {
  width: 100%;
  height: 1200px;

  .img {
    height: 250px;
    width: 98%;
    border-radius: 15px;
  }

  .tags {
    position: absolute;
    right: 20px;
    top: 55px;
    z-index: 10000;
    background-color: rgba(125, 118, 118, 0.4);
    width: 60px;
    height: 30px;
    text-align: center;
    line-height: 30px;
    border-radius: 15px;

    .shoucang {
      
      font-size: 10px;
    }
  }

  .body {
    width: 90%;
    margin: 0 auto;

    .buju {
      width: 100%;
      display: flex;
      justify-content: space-around;
      padding-top: 10px;
      flex-wrap: nowrap;

      .xiangxi {
        float: right;
        display: flex;
        flex-direction: column;
        flex-wrap: nowrap;
        justify-content: space-around;
      }
    }

    .biaoti {
      font-size: larger;
      font-weight: 600;
      text-align: start;
    }

    .guanjianci {
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;
    }

    .con {
      text-align: start;
      margin-top: 5%;
      width: 100%;
      height: auto;
      background-color: #fff;
      border-radius: 15px;

      .jieshao {
        padding-top: 10px;
        padding-bottom: 10px;
        margin: 0 auto;
        width: 95%;
        font-size: 15px;
        font-weight: 600;
      }
    }

    .loc {
      height: 100%;
      width: 100%;
      margin-top: 5%;
      background-color: #fff;
      border-radius: 15px;
      text-align: start;
      display: flex;
      justify-content: start;

      .jiatu {
        width: 40px;
        height: 40px;
        background-color: grey;
        border-radius: 5px;
        margin-top: 10px;
        margin-left: 10px;
        margin-bottom: 10px;
        display: inline-block;
      }

      .dizhi {
        margin-top: 10px;
        margin-left: 5px;
      }
    }
  }

  .ruzhu {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: #fff;
    display: flex;
    // flex-direction: column;
    justify-content: space-between;
    align-items: center;
    padding: 10px;
    height: 100px;
    box-shadow: 0 -4px 8px rgba(0, 0, 0, 0.15);
  }

  .r-price {
    font-size: 20px;
    font-weight: bold;
  }

  .r-liji {
    margin-left: auto;
    padding-left: 20px;
  }

  .mt-button {
    background-color: #0066ff;
    color: #fff;
    font-size: 16px;
    font-weight: bold;
  }

  .button {
    height: 30px;
    width: 100px;
  }

  .per {
    font-size: 5px;
  }

  .perImg {
    width: 30px;
    height: 30px;
  }
}

.modal {
  display: flex;
  flex-direction: column;
  position: fixed;
  width: auto;
  bottom: -90px;
  margin-bottom: 200px;
  background-color: rgb(106, 101, 101);
  padding: 5px 5px 5px 5px;
  border-radius: 10px;

  .close-btn {
    width: auto;
  }
}

.comment {
  width: 95%;
  margin: 0 auto;
  background-color: #fff;
  border-radius: 10px;
  padding-bottom: 200px;
}

// Comment container styles
.comment-container {
  background-color: #f5f5f5;
  border-radius: 10px;
  padding: 20px;
  margin-bottom: 20px;

  // Comment header styles
  .comment-header {
    display: flex;
    align-items: center;

    .avatar {
      border-radius: 50%;
      width: 50px;
      height: 50px;
      margin-right: 10px;
    }

    .comment-info {
      display: flex;
      flex-direction: column;
    }

    .username {
      font-size: 1.2em;
      font-weight: bold;
      margin-bottom: 5px;
    }

    .created-at {
      font-size: 0.8em;
      color: #888;
    }
  }

  // Comment body styles
  .comment-body {
    margin-top: 10px;

    .comment-text {
      font-size: 1.2em;
      line-height: 1.5;
      margin-bottom: 10px;
    }

    .comment-image {
      width: 100%;
      height: 300px;
      // max-width: 100%;
      border-radius: 10px;
    }
  }

  // Comment footer styles
  .comment-footer {
    display: flex;
    align-items: center;
    margin-top: 10px;

    .likes-count {
      font-size: 0.8em;
      // color: #888;
      margin-right: 10px;
    }

    .like-button {
      background-color: transparent;
      border: none;
      color: #888;
      cursor: pointer;
      transition: all 0.2s ease-in-out;

      &:hover {
        color: #000;
      }
    }
  }
}

// Comment form styles
.comment-form {
  display: flex;
  align-items: center;
  margin-top: 20px;

  .comment-input {
    flex-grow: 1;
    border: none;
    border-radius: 5px;
    padding: 10px;
    margin-right: 10px;
  }

  .image-input {
    display: none;
  }

  .submit-button {
    background-color: #007bff;
    border: none;
    border-radius: 5px;
    color: #fff;
    cursor: pointer;
  }
}
</style>
